{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>请假</title>
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
<style type="text/css">
    .mui-content{padding-bottom: 65px;}
    .mui-content>.mui-table-view:first-child{margin: 0;}
    .mui-table-view-cell{ padding: 16px 15px;}
    .mui-table-view-cell>a:not(.mui-btn){margin: -16px -15px;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <!--请假操作-->
    <form class="mui-input-group mb-input-group">
        <div class="mui-input-row mb-input-row">
            <label>请假类型</label>
            <button id='showUserPicker' class="btn mui-btn mui-btn-block userResult">请选择</button>
            <i class="mui-icon mui-icon-arrowright"></i>
        </div>
        <div class="mui-input-row mb-input-row">
            <label>开始时间</label>
            <button id="result"  data-options='{"type":"hour","customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"}]},"labels":["年", "月", "日", "时段"]}' class="btn1 mui-btn mui-btn-block">请选择</button>
            <i class="mui-icon mui-icon-arrowright"></i>
        </div>
        <div class="mui-input-row mb-input-row">
            <label>结束时间</label>
            <button id="result1"  data-options='{"type":"hour","customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"}]},"labels":["年", "月", "日", "时段"]}' class="btn2 mui-btn mui-btn-block">请选择</button>
            <i class="mui-icon mui-icon-arrowright"></i>
        </div>
        <div class="mui-input-row mb-input-row bbs-posting leave-textarea">
            <h4 class="leave-reason">请假事由</h4>
            <textarea class="mui-input-clear question" placeholder="请输入请假事由"></textarea>
        </div>
        <div id="release" class="mb-input-submit">
            <input class="homework-submit" type="button" value="提交" />
        </div>
    </form>
</div>

{% endblock %}

{#js代码#}
{% block js %}
<script src="js/mui.picker.min.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var holiday = '';
    //请假类型
    (function($, doc) {
        $.init();
        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //普通示例
            var userPicker = new mui.PopPicker();
            userPicker.setData([{
                value: "1",
                text: "年假"
            }, {
                value: '2',
                text: '事假'
            }, {
                value: '3',
                text: '病假'
            }, {
                value: '4',
                text: '调休'
            }, {
                value: '5',
                text: '陪产假'
            }, {
                value: '6',
                text: '婚假'
            }, {
                value: '7',
                text: '例假'
            }, {
                value: '8',
                text: '丧假'
            }, {
                value: '9',
                text: '其他'
            }]);
            var showUserPickerButton = doc.getElementById('showUserPicker');
            var userResult = doc.getElementsByClassName('userResult')[0];
            showUserPickerButton.addEventListener('tap', function(event) {
                userPicker.show(function(items) {
                    userResult.innerText = items[0].text;
                    console.log(userResult.innerText);
                    holiday = items[0].value;
                });
            }, false);
        });
    })(mui, document);

    (function($) {
        //发布时日返回结果
        $.init();
        var result = $('#result')[0];
        var result1 = $('#result1')[0];
        var btns1 = $('.btn1');
        var btns2 = $('.btn2');
        btns1.each(function(i, btn1) {
            btn1.addEventListener('tap', function() {
                var _self = this;
                if(_self.picker) {
                    _self.picker.show(function (rs) {
                        result.innerText = rs.text;
                    });
                } else {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    _self.picker = new $.DtPicker(options);
                    _self.picker.show(function(rs) {
                        result.innerText = rs.text;
                        console.log(rs.text);
                    });
                }

            }, false);
        });


        //截止日期返回结果
        btns2.each(function(i, btn2) {
            btn2.addEventListener('tap', function() {
                var _self = this;
                if(_self.picker) {
                    _self.picker.show(function (rs) {
                        result1.innerText = rs.text;
                        if(result1.innerText<result.innerText){
                            alert('结束时间错误，请重新选择');
                            result1.innerText = '';
                        }
                    });
                } else {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    _self.picker = new $.DtPicker(options);
                    _self.picker.show(function(rs) {
                        result1.innerText = rs.text;
                        console.log(rs.text);
                    });
                }

            }, false);
        });
    })(mui);

    var url = location.search;
    if(url){
        let type = parseInt(GetQueryString('type'));
        let sp;
        let ep;
        let cont;
        switch (type){
            case 1 :
                type = "年假";
                break;
            case 2 :
                type = "事假";
                break;
            case 3 :
                type = "病假";
                break;
            case 4 :
                type = "调休";
                break;
            case 5 :
                type = "陪产假";
                break;
            case 6 :
                type = "婚假";
                break;
            case 7 :
                type = "例假";
                break;
            case 8 :
                type = "丧假";
                break;
            case 9 :
                type = "其他"
                break;
        }

        if(GetQueryString('sp') == 1){
            sp = "上午";
        }else{
            sp = "下午";
        }

        if(GetQueryString('ep') == 1){
            ep = "上午";
        }else{
            ep = "下午";
        }

        cont = decodeURI(decodeURI(GetQueryString('content')));

        $(".homework-submit").val('修改');
        $("#showUserPicker").text(type);
        $("#result").text(GetQueryString('sd').substr(0,10) +' '+sp);
        $("#result1").text(GetQueryString('ed').substr(0,10)+' '+ep);
        $(".mui-input-clear,question").val(cont);
    }

    $(".homework-submit").on('click',function(){

        let timedate = new RegExp(/^\d+-\d+-\d+/);

        let startdate = timedate.exec(result.innerText);
        let starttime = result.innerText.substr(result.innerText.length - 2);

        if (starttime == '上午') {
            starttime = 1;
        } else {
            starttime = 2;
        }
        let overdata = timedate.exec(result1.innerText);
        let overtime = result1.innerText.substr(result.innerText.length - 2);
        if (overtime == '上午') {
            overtime = 1;
        } else {
            overtime = 2;
        }
        let content = $('.mui-input-clear').val();
        let date = new Date();
        let date1 = (date.getMonth()+1) ? '0'+(date.getMonth()+1):(date.getMonth()+1);
        date = date.getFullYear()+'-'+date1+'-'+date.getDate();
        if(!holiday){
            console.log(date2.toString());
            return mui.toast('请选择请假类型');
        }
        if(startdate.toString()< date){
            return mui.toast('开始时间不能小于现实时间');
        }
        if(!startdate){
            return mui.toast('请选择开始时间');
        }
        if(!overdata){
            return mui.toast('请选择结束时间');
        }
        if(startdate > overdata){
            return mui.toast('结束时间不能比开始时间早');
        }
        if(!content){
            return mui.toast('请假事由不能为空');
        }


        if(url){
            mui.post('/editleave', {
                    id:GetQueryString('id'),
                    type: holiday,
                    startDate: startdate,
                    startPart: starttime,
                    endDate: overdata,
                    endPart: overtime,
                    content: content,
                }, function (data) {
                    if (data.code != 200) {
                        mui.toast(data.message);
                    } else {
                        mui.toast('修改成功');
                        window.location.replace('/leaveinfo');
                    }
                }, 'json'
            );
        }else {
            mui.post('/leave', {
                type: holiday,
                startDate: startdate,
                startPart: starttime,
                endDate: overdata,
                endPart: overtime,
                content: content,
                }, function (data) {
                    if (data.code != 200) {
                        mui.toast(data.message);
                    } else {
                        mui.toast('提交成功');
                        window.location.replace('leaveinfo');
                    }
                }, 'json'
            );
        }
    })

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
</script>
<!--flotdemo-->
{% endblock %}
